import React, { useState } from 'react'
import "./index.css"
export default function Item({todo,done,id,todoList,setTodoList}) {
  //所有数据里面的id
  // console.log(id);
    // console.log(done);
    //移入变色 移除变色
    const [isActive, setActive] = useState(false)
    // const enter =()=>{
    //   // console.log(1);
    //   setActive(true)
    // }
    // const leave =()=>{
    //   // console.log(2);
    //   setActive(false)
    // }
    //科里化写法
    const move =(mov)=>{
      //外层函数接受参数，返回的函数是真正的事件函数
      return ()=>{
        setActive(mov)
      }
    }
    //单选框切换
    const checkedHandle = (e)=>{
      //当前按钮状态
      const check = e.target.checked
      const newTdo =  todoList.map(item=>{
        //如果当前点击的按钮的id === /所有数据里面的id某一个 那他就是我要点的哪一个
        if(item.id===id){
          //把这个框框的checked 赋值为 当前按钮状态
          item.done= check
        }
        //否则 就把它原封不动地还回去
        return item
      })
     setTodoList(newTdo)
    }
    //删除按钮
    const deleteChioce = (e)=>{
      //如果当前点击的按钮的id ！== /所有数据里面的id某一个 那他就是我要删除的哪一个
      let  newTodo =  todoList.filter((item=>item.id!==id))
       setTodoList(newTodo)
     }


  return (
    <li onMouseEnter={move(true)} onMouseLeave={move(false)} className={isActive?"active":""}>
      <label>
        <input type="checkbox" checked={done} onChange={checkedHandle} />
        <span>{todo}</span>
      </label>
      <button className="btn btn-danger" onClick={deleteChioce} style={{ display:isActive?"block":"none"}}>删除</button>
    </li>
  )
}
